<template>
  <div id="blog" :style="{backgroundColor: '#' + color}">
    <!-- 目录部分 -->
    <div class="title">
      <catalog/>
    </div>
    <!-- 最新博客展示部分 -->
    <div class="main">
      <div class="main-l">
        <articles/>
      </div>
      <div class="main-r">
        <div>
          不积跬步，无以至千里<br/>
        </div>
        <div>
          <blog-info class="blog-info"/>
        </div>
        <div>
          不积小流，无以成江海<br/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Catalog from './childComps/Catalog'
import Articles from './childComps/Articles'
import BlogInfo from './childComps/BlogInfo'

export default {
  name: '',
  data() {
    return {
      color: 'fff',
      colorday: 'fff',
      colornight: '666',
    };
  },
  components:{
    Catalog,
    Articles,
    BlogInfo
  },
  watch:{
  },
  methods: {},
  computed:{
    nightData() {
      return this.$store.state.isNight
    }
  },
  watch:{
    nightData(newData, oldData) {
      if(newData){
        this.color = this.colorday
      } else {
        this.color = this.colornight
      }
    }
  }
};
</script>

<style scoped>
#blog {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.title {
  height: 400px;
  width: 100%;
  /* background: url(https://wx1.sinaimg.cn/large/006yjJnHgy1gebtrmo42oj31hc0u0x6p.jpg); */
  background: url(../../assets/img/blogbg.jpg);
  background-size: 100% auto;
  margin: 1.5vw 0;
}
.main {
  width: 100%;
  flex: 1;
  margin: 0 10px;
  display: flex;
}
.main-l {
  flex: 50%;
}
.main-r {
  flex: 50%;
  height: 100%;
  font-size: 50px;
  text-align: center;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  letter-spacing: 4px;
  cursor: default;
}
.main-r div {
  margin: 20px 0;
}
.blog-info {
  font-size: 14px;
  letter-spacing: 1px;
}
</style>
